<template>
  <nav-bar>
    <template v-slot:default>订单详情</template>
  </nav-bar>

  <div class="order-status">
    <div class="status-item"><span>订单状态：</span>{{statusText}}</div>
    <div class="status-item"><span>订单编号：</span>{{detail.order_no}}</div>
    <div class="status-item"><span>下单时间：</span>{{detail.created_at}}</div>
    <div class="status-item">
      <van-button type="warning" block round v-if="detail.status === 1" @click="showPayFn">去支付</van-button>
      <van-button type="success" block round v-if="detail.status === 2" @click="handleConfirmOrder">确认收货</van-button>
    </div>
    <van-popup
        v-model:show="show"
        closeable
        position="bottom"
        :style="{ height: '30%' }"
    >
      <van-grid :border="false" :column-num="2" style="margin: 8px;padding: 8px">
        <van-grid-item title="支付宝">
          <div>支付宝二维码</div>
          <van-image :src="aliyun" />
        </van-grid-item>
        <van-grid-item title="微信">
          <div>微信二维码</div>
          <van-image :src="wechat" />
        </van-grid-item>
      </van-grid>
    </van-popup>
  </div>

  <div class="order-status">
    <div class="status-item"><span>配送金额：</span>￥{{total}}.00</div>
    <div class="status-item"><span>配送方式：</span>普通快递</div>
  </div>

  <van-card v-for="item in detail.orderDetails.data" :key="item.id"
      :num="item.num"
      :price="item.price + '.00'"
      :desc="item.goods.description"
      :title="item.goods.title"
      :thumb="item.goods.cover_url"
      style="text-align: left"
      lazy-load
  />

</template>

<script>
import {ref, reactive, toRefs, computed, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Toast, Dialog} from 'vant';
import {getOrderDetail, payOrder, payOrderStatus, confirmOrder} from "network/order";
import NavBar from "components/common/navbar/NavBar";
export default {
  name: "OrderDetail",
  components: {
    NavBar
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      orderNo: '', // 订单ID
      detail: {
        status: 0,
        orderDetails: {
          data: []
        },
      },
      show: false,
      aliyun: '',
      wechat: '',
    })
    const statusText = computed(() => ['', '已下单', '已支付', '等待发货', '确认收货', '已过期'][state.detail.status])
    const total = computed(() => state.detail.orderDetails.data.reduce((prev, next) => prev + parseInt(next.num) * parseFloat(next.price), 0))
    // 支付二维码
    const showPayFn = () => {
      state.show = true
      payOrder(state.orderNo, {type: 'aliyun'}).then(res => state.aliyun = res.qr_code_url)
      // payOrder(state.orderNo, {type: 'wechat'}).then(res => state.wechat = res.qr_code_url)
      payOrder(state.orderNo, {type: 'aliyun'}).then(res => state.wechat = res.qr_code_url)
      // 轮询支付状态
      let timer = setInterval(() => {
        payOrderStatus(state.orderNo).then(res => {
          if (res === 2) {
            clearInterval(timer)
            state.detail.status = res
            state.show = false
          }
        })
      }, 2000)
    }
    // 确认收货
    const handleConfirmOrder = () => {
      Dialog.confirm({title: '是否确认收货？'}).then(() => {
        confirmOrder(state.orderNo).then(res => {
          if (res.status === 204) {
            Toast('确认收货成功！')
            state.detail.status = 4
          }
        })
      })
    }
    onMounted(() => {
      Toast.loading({message: '加载中...', forbidClick: true})
      const {id} = route.query
      getOrderDetail(id).then(res => {
        state.orderNo = id
        state.detail = res
        Toast.clear()
      })
    })
    return {
      ...toRefs(state), statusText, total, showPayFn, handleConfirmOrder
    }
  }
}
</script>

<style scoped lang="scss">
.order-status {
  margin-top: 45px;
  padding: 15px;
  text-align: left;
  .status-item {
    margin: 10px 0;
    span {
      color: var(--color-text)
    }
  }
}
</style>